Learn how to create a festive webpage for Ramadan Kareem 2024 using HTML & CSS. Step-by-step guide for designing greetings for Ramzan Festival in English.
Table of Contents
Ramadan Kareem 2024 is a significant time observed by Muslims worldwide, symbolizing a month of spiritual reflection, prayer, and fasting. Similarly, the Ramzan Festival commemorates the revelation of the Quran to Prophet Muhammad. As we approach this sacred occasion, expressing warm wishes through a dedicated webpage holds great importance. This guide aims to assist in crafting a heartfelt message using HTML and CSS, allowing you to extend greetings for Ramadan Kareem 2024 in English. Let's embark on this journey of creating a meaningful digital expression of goodwill and solidarity during this auspicious time.
Source Code
Step 1 (HTML Code):
The first thing we need to do is create our HTML File for the Ramadan Kareem webpage. We'll start with a well-organized markup. After creating the files just paste the following codes into your file. Remember that you must save a file with the .html extension.
Here's a breakdown of each part:
1. <!DOCTYPE html>: This declaration specifies the document type and version of HTML being used, which in this case is HTML5.
2. <html lang="en">: This tag marks the beginning of the HTML document and specifies that the language used in the document is English.
3. <head>: This section contains meta-information about the document such as character encoding, viewport settings, and the title of the page.
- <meta charset="UTF-8">: This meta tag sets the character encoding to UTF-8, which includes a wide range of characters from various languages.
- <meta name="viewport" content="width=device-width, initial-scale=1.0">: This meta tag sets the viewport properties for mobile responsiveness.
- <title>Ramadan Kareem</title>: This sets the title of the webpage, which appears on the browser tab.
- <link rel="stylesheet" type="text/css" href="https://cdnjs...">: This links an external CSS stylesheet containing styles for Font Awesome icons.
- <link rel="stylesheet" href="styles.css">: This links an external CSS stylesheet named styles.css located in the same directory as the HTML file.
4. <body>: This section contains the content of the webpage that will be displayed to the user.
- <div class="greeting-container">: This div contains a set of greetings and messages related to Ramadan.
- <div class="greeting">Wishing you and your family</div>: This div contains a greeting message.
- <div class="ramadan-kareem">Ramadan Kareem ❤</div>: This div contains the main message, "Ramadan Kareem" along with a heart emoji.
- <div class="greeting">May this holy month bring peace and happiness to you and your loved ones</div>: This div contains another greeting message.
- <div class="myFooter">: This div contains the footer section of the webpage.
- <p>© 2024 Powered By <a href="https://www.f..">Omar Mohamed Sharawi</a> <i class="fas fa-heart"></i> All rights reserved.</p>: This paragraph contains copyright information, a link to Omar Mohamed Sharawi's Facebook page, and a heart icon from Font Awesome.
Step 2 (CSS Code):
Next, we need to style our Ramadan Kareem webpage by adding our CSS. This will give our Ramadan Kareem webpage an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
Let's break down the CSS code step by step:
1. Body Styles:
- font-family: Sets the font family for the entire document. It prefers 'Segoe UI' font, but if unavailable, it will try Tahoma, Geneva, Verdana, and finally any generic sans-serif font.
- background-color: Sets the background color of the body to a light peach color (#f4e3d7).
- margin: Sets the margin of the body to 0.
- height: Sets the height of the body to 100 viewport height units (100vh), ensuring the body takes up the full height of the viewport.
- display: Sets the display property to flex, allowing flexible layout options.
- justify-content and align-items: Centers the content both horizontally and vertically within the body.
- overflow: Sets the overflow property to hidden, preventing content from overflowing beyond the body's boundaries.
2. .greeting-container Styles:
- text-align: Centers the text within the greeting container.
3. .greeting Styles:
- font-size: Sets the font size to 2em.
- color: Sets the text color to a dark brown (#5c4a3f).
- animation: Applies the fadeInUp animation to the greeting text, making it fade in while moving up slightly over 2 seconds with easing.
4. .ramadan-kareem Styles:
- color: Sets the text color to a light brown (#dab88b).
- font-size: Sets the font size to 4em.
- margin: Adds a top and bottom margin of 20 pixels.
- animation: Applies the fadeIn animation to the "Ramadan Kareem" text, making it fade in while moving up slightly over 4 seconds with easing.
5. @keyframes fadeIn and fadeInUp:
- These are animation keyframes defining the initial and final states of the fadeIn and fadeInUp animations respectively. They specify the opacity and translateY transformations from start to finish.
6. .myFooter Styles:
- text-align: Centers the content within the footer.
- color: Sets the text color to white (#ffffff).
- background-color: Sets the background color to a dark brown (#5c4a3f).
- padding: Adds 10 pixels of padding on the top and bottom.
- margin-top: Sets a top margin of 70 pixels.
- left, right, bottom: Anchors the footer to the bottom of the viewport.
- width: Sets the width to 100% of the viewport.
- position: Sets the position to fixed, ensuring it remains fixed at the bottom of the viewport even when scrolling.
- box-shadow: Adds a subtle shadow effect at the bottom of the footer.
7. .myFooter p Styles:
- margin and padding: Sets margin and padding of paragraphs to 0.
- font-size: Sets the font size to 1em.
8. .myFooter a Styles:
- color: Sets the color of links to a light brown (#dab88b).
- text-decoration: Removes underline from links.
- font-weight: Sets the font weight to bold for links.
9. .myFooter a:hover Styles:
- Applies when hovering over links, underlining them.
10. .myFooter .fa-heart Styles:
- color: Sets the color of elements with class "fa-heart" to red.
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4e3d7;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.greeting-container {
text-align: center;
}
.greeting {
font-size: 2em;
color: #5c4a3f;
animation: fadeInUp 2s ease forwards;
}
.ramadan-kareem {
color: #dab88b;
font-size: 4em;
margin: 20px 0;
animation: fadeIn 4s ease forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.myFooter {
text-align: center;
color: #ffffff;
background-color: #5c4a3f;
padding: 10px 0;
margin-top: 70px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
position: fixed;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2);
}
.myFooter p {
margin: 0;
padding: 0;
font-size: 1em;
}
.myFooter a {
color: #dab88b;
text-decoration: none;
font-weight: bold;
}
.myFooter a:hover {
text-decoration: underline;
}
.myFooter .fa-heart {
color: red;
} Final Output:
Conclusion:
In conclusion, creating a webpage to extend wishes for Ramadan Kareem 2024 using HTML and CSS provides a unique opportunity to connect with others during this sacred time. By following the steps outlined in this guide, you can design a heartfelt greeting that reflects the spirit of the Ramzan Festival and conveys your warmest wishes to friends, family, and communities. Remember to infuse your design with creativity, sincerity, and cultural sensitivity, ensuring that your message resonates with authenticity. As you embark on this journey of digital expression, may your efforts contribute to spreading joy, peace, and blessings during Ramadan Kareem 2024.
Code by: Omar Mohamed Sharawi
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
